<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="txt">
  <ul class="list">
  </ul>
</body>
<script>


  const txt = document.querySelector(".txt");
  const list = document.querySelector(".list");


  txt.oninput = function(){
    jsonp( {
      url:"https://www.baidu.com/sugrec",
      data:{
        prod: "pc",
        wd: this.value,
        cb: "dsdhgfyutd"
      },
      success:res=>{
        console.log(res)
      },
      jsonp: "cb"
    } )

    // jsonp( {
    //   url:"https://suggest.taobao.com/sug",
    //   data:{
    //     q: this.value,
    //     callback: "ahsdggfjhtdr"
    //   },
    //   success:res=>{
    //     console.log(res)
    //   },
    //   jsonp: "callback"
    // } )
  }
  
  function jsonp({ url, data, success, jsonp }){
    // 1. 解析数据
    let str = "";
    for(let i in data){
      str += `${i}=${data[i]}&`
    }
    // 2. 拼接到url
    url += "?" + str.slice(0,-1);
    // 3. 创建script设置src插入页面
    const script = document.createElement("script")
    script.src = url;
    document.body.appendChild(script);
    // 4. 定义全局函数（根据接口要求的字段找到函数名，定义成全局）
    // jsonp用来保存接口要求的字段名
    window[data[jsonp]] = function(res){
      success(res);
    }
  }


  
</script>
</html>